import React from 'react'
import {
    View,
    StyleSheet,
    TouchableWithoutFeedback,
    Text,
    Image
} from 'react-native'

export default class CommunitySortCell extends React.PureComponent {

    state = {
        isSelected: false,
    }

    render() {
        this.isHighlight = this.props.highlightTitle == this.props.title
        this.bgColor = this.isHighlight ? 'rgba(184, 136, 100, 1)' : '#eeeeee'//226206185
        this.bgColor = this.state.isSelected ? 'rgba(226, 206, 185, 1)' : this.bgColor
        this.color = this.isHighlight ? 'white' : '#a9895f'
        this.opacity = this.isHighlight ? 1 : 0
        const { style } = this.props
        return (
            <View style={[styles.container, style]} >
                <TouchableWithoutFeedback
                    onPress={this.clickCellAction}
                    onPressIn={this.clickCellInAction} 
                    onPressOut={this.clickCellOutAction}>
                    <View style={[styles.content, { backgroundColor: this.bgColor }]}>
                        <Text style={[styles.text, { color: this.color }]}>{this.props.title}</Text>
                    </View>
                </TouchableWithoutFeedback>
                <Image style={[styles.close, { opacity: this.opacity }]} source={require('../../img/close.png')} />
            </View>
        )
    }

    clickCellAction = () => {
        this.props.action(this.props.title)
    }

    clickCellInAction = () => {
        if (this.isHighlight) return
        this.setState({
            isSelected:true,
        })
    }

    clickCellOutAction = () => {
        if (this.isHighlight) return
        this.setState({
            isSelected:false
        })
    }
}

const styles = StyleSheet.create({
    container: {
        padding: 10,
        flexDirection: 'row',
        backgroundColor: 'white',
        justifyContent: 'center'
    },
    content: {
        padding: 10,
        flexDirection: 'row',
        borderRadius: 15,
        height: 25,
        justifyContent: 'center',
        alignItems: 'center'
    },
    text: {
        fontSize: 13,
        height: 15,
    },
    close: {
        width: 12,
        height: 12,
        marginLeft: -10,
        marginTop:-3,
        backgroundColor: 'white',
        borderRadius: 6
    }
})